import { useMemo } from 'react';
import { FixedSizeGrid } from 'react-window';

import { useControllableValue } from 'ahooks';
import { Select, SelectProps } from 'antd';
import cs from 'classnames';
import { observer } from 'mobx-react-lite';

import { useStore } from '@/store';

import { getBrowserScrollWidth } from '@/utils';
import { Icon } from '@iconify/react';

import styles from './index.module.scss';

export type IconSelectProps = SelectProps;

const IconSelect: React.FC<IconSelectProps> = ({
  defaultValue,
  // value,
  // onChange,
  popupClassName,
  className,
  // searchValue,
  // onSearch,
  ...rest
}) => {
  const store = useStore();
  const [internalValue, setInternalValue] = useControllableValue(rest);
  const [internalSearchValue, setInternalSearchValue] = useControllableValue(rest, {
    valuePropName: 'searchValue',
    trigger: 'onSearch'
  });

  const options = useMemo(() => {
    return store.icon['ri']['Arrows'].map((v) => {
      const name = `ri:${v}`;

      return {
        value: name,
        label: name
      };
    });
  }, [store.icon]);

  const list = useMemo(() => {
    if (!internalSearchValue) {
      return options;
    }

    const reg = new RegExp(internalSearchValue);

    return options.filter((v) => {
      return reg.test(v.value as string);
    });
  }, [internalSearchValue, options]);

  const DROPDOWN_WIDTH = 300;
  const DROPDOWN_HEIGHT = 320;
  const COLUMN_COUNT = 5;
  const COLUMN_WIDTH = (DROPDOWN_WIDTH - getBrowserScrollWidth()) / 5;
  const ROW_COUNT = Math.ceil(list.length / 5);
  const ROW_HEIGHT = COLUMN_WIDTH;

  return (
    <Select
      {...rest}
      options={options}
      defaultValue={defaultValue}
      value={internalValue}
      onChange={(v, o) => {
        setInternalValue(v);
        // onChange?.(v, o);
      }}
      showSearch
      searchValue={internalSearchValue}
      onSearch={(v) => {
        setInternalSearchValue(v);
        // onSearch?.(v);
      }}
      allowClear
      className={cs(styles['input'], className)}
      popupClassName={cs(styles['dropdown'], popupClassName)}
      popupMatchSelectWidth={false}
      dropdownRender={() => {
        return (
          <FixedSizeGrid
            width={DROPDOWN_WIDTH}
            height={DROPDOWN_HEIGHT}
            columnCount={COLUMN_COUNT}
            columnWidth={COLUMN_WIDTH}
            rowCount={ROW_COUNT}
            rowHeight={ROW_HEIGHT}
            className={styles['list']}
          >
            {({ columnIndex, rowIndex, style }) => {
              const item = list[rowIndex * 5 + columnIndex];

              if (!item) {
                return null;
              }

              return (
                <div
                  key={item.value}
                  className={cs(styles['item'], {
                    [styles['active']]: item.value === internalValue
                  })}
                  onClick={() => {
                    setInternalValue(item.value);
                  }}
                  style={style}
                >
                  <Icon icon={item.value} />
                </div>
              );
            }}
          </FixedSizeGrid>
        );
      }}
    />
  );
};

export default observer(IconSelect);
